import vuex from 'vuex'
import Vue from 'vue'

import routerManage from './routerManage.js'
import messageManage from './messageManage.js'
Vue.use(vuex)
// 模块化store 提供特定组件使用
const format = {
    path: new String(),
    label: new String(),
    closable: new Boolean(),
    component: {},
}

const state = {
    /**
     * @type {Array<format>}
     */
    tabList: [],
    activeTab: '',
    /**
     * 用户信息
     */
    accountInfo: {},
    menu_items: [
        {
            path: '/diary/diary',
            label: '伴宠日记',
            children: []
        },
        {
            path: '/adopter/adopter',
            label: '领养帖',
            children: []
        },
        {
            path: '/introduce',
            label: '介绍',
            children: [
                {
                    path: '/introduce/breed',
                    label: '宠物介绍',
                    children: []
                },
                {
                    path: '/introduce/vaccine',
                    label: '疫苗介绍',
                    children: []
                },
            ]
        },
        {
            path: '/pet/pet',
            label: '我的爱宠',
            children: []
        },
        {
            path: '/personal',
            label: '个人中心',
            children: [
                {
                    path: '/personal/message',
                    label: '我的私信',
                    children: []
                },
            ]
        }
    ],
    keepActiveList: []
}

const getters = {

}

const mutations = {
    /**
     * 添加store属性
     * @param {state} state
     * @param {{name,value}} index 
     */
    AddStoreAttributes(state, index) {
        const isExist = state.keys?.filter((item) => { item === index.name })
        if (!isExist || isExist.length === 0)
            state[index?.name] = index.value
        else state[isExist] = index.value
    },

    /**
     * 添加tab标签
     * @param {state} state 
     * @param {format} value 
     */
    AddTabList(state, value) {
        const isExist = state.tabList.filter((item) => item.path === value.path)
        if (isExist.length === 0) {
            const temp = {
                path: value.path,
                closable: value.closable || true,
                label: value.label || 'huily',
                component: value.component
            }
            state.tabList.push(temp)
            state.keepActiveList.push(temp.path)
        }
    },

    /**
     * 精准移除tab
     * 后续需要可以销毁组件
     * @param {state} state 
     * @param {format | String} value
     * @returns {Boolean}
     */
    RemoveTabList(state, value) {
        // 最后一个不可关闭
        if (state.tabList.length > 1) {
            state.tabList = state.tabList.filter((item) => {
                return item.path != ((typeof (value) === 'string') ? value : value.path)
            })
            state.keepActiveList = state.keepActiveList.filter((item) => {
                return item != ((typeof (value) === 'string') ? value : value.path)
            })
            // 关闭当前的标签需要跳转到
            if (state.activeTab == ((typeof (value) === 'string') ? value : value.path)) {
                state.activeTab = state.tabList[state.tabList.length - 1].path
            }
        }
    },

    /**
     * @param {state} state 
     * @param {format | String} value 
     */
    SetActiveTab(state, value) {
        if (typeof (value) === 'object')
            state.activeTab = value.path
        if (typeof (value) === 'string')
            state.activeTab = value
    },
    /**
     * @param {state} state
     * @param {any} value
     */
    SetAccountInfo(state, value) {
        if (value)
            state.accountInfo = value
        else throw Error('没有用户信息')
    }
}

const actions = {}

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        routerManage,
        messageManage
    }
})